<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* Mapv (https://github.com/huiyan-fe/mapv)
* dat-gui (https://github.com/dataarts/dat.gui)
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    <title data-i18n="resources.title_mapvNyvTaxi"></title>
    <script type="text/javascript" include="jquery,widgets,dat-gui" src="../js/include-web.js"></script>
    <script type="text/javascript" include="mapv" src="../../dist/maplibregl/include-maplibregl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%">
    <div id="map"></div>
    <script type="text/javascript">
      var attribution =
        "<a href='https://www.maplibre.com/about/maps/' target='_blank'>© MapLibre </a>" +
        "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        "Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a> | </span> " +
        resources.text_dataSources +
        " <a href='http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml/' target='_blank'>NYCTaxi(" +
        resources.text_NYTaxiCarPoint +
        ')</a>  © 2018 ' +
        resources.title_3baidu +
        ' MapV';
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var tileURL = host + '/iserver/services/map-china/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}';
      var layer,
        map = new maplibregl.Map({
          container: 'map',
          style: {
            version: 8,
            sources: {
              'raster-tiles': {
                attribution: attribution,
                type: 'raster',
                tiles: [tileURL],
                tileSize: 256
              }
            },
            layers: [
              {
                id: 'simple-tiles',
                type: 'raster',
                source: 'raster-tiles',
                minzoom: 0,
                maxzoom: 22
              }
            ]
          },
          center: [-73.931577, 40.745654],
          zoom: 11
        });
      map.addControl(new maplibregl.NavigationControl(), 'top-left');
      map.addControl(new maplibregl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');
      widgets.loader.showLoader();
      map.on('load', function () {
        $.get('../data/nyc-taxi.csv', function (csvstr) {
          widgets.loader.removeLoader();
          var options = {
            size: 1.5,
            context: 'webgl',
            fillStyle: 'rgba(250, 50, 50, 0.8)',
            draw: 'simple'
          };
          var dataSet = mapv.csv.getDataSet(csvstr);
          dataSet.initGeometry();
          $('#loading').hide();

          layer = new maplibregl.supermap.MapvLayer(dataSet, options);
          map.addLayer(layer);

          $('#loading').hide();
          initDatGUI(layer, options);
        });
      });

      function initDatGUI(layer, options) {
        var gui = new dat.GUI();
        var Control = createConfigControl();
        map.addControl(new Control(gui.domElement), 'top-right');
        gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
        gui.addColor(options, 'fillStyle').onChange(finished);

        function finished() {
          layer.update(options);
        }
      }

      //创建图层操作控件
      function createConfigControl() {
        function ConfigControl(domElement) {
          this.dom = domElement;
        }

        ConfigControl.prototype.onAdd = function (map) {
          this._map = map;
          this._container = this.dom;
          this._container.className = 'maplibregl-ctrl ' + this._container.className;
          return this._container;
        };

        ConfigControl.prototype.onRemove = function () {
          this._container.parentNode.removeChild(this._container);
          this._map = undefined;
        };
        return ConfigControl;
      }
    </script>
  </body>
</html>
